<template>
  <div>
    <page-header-wrapper>
      <a-card :bordered="false">
        <!-- 研究者费用 -->
        <ResearcherList
          :proId="proId"
          :approval="researchApprovalInfo"
          v-if="$auth('PROJECT.PROJECT_FEE') && $auth('PROJECT.PROJECT_FEE_RESEARCHER')"
        />
        <!-- 受试者者费用 -->
        <SubjectList
          :proId="proId"
          style="margin-top: 24px"
          :approval="subjectApprovalInfo"
          v-if="$auth('PROJECT.PROJECT_FEE') && $auth('PROJECT.PROJECT_FEE_PATIENT')"
        />
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import storage from 'store'
import { CURRENT_PROJECT } from '@/store/mutation-types'

import { getApprovalDetail } from '@/api/overview/approval'
import ResearcherList from './researcher/ResearcherList'
import SubjectList from './subject/SubjectList'

export default {
  components: {
    ResearcherList,
    SubjectList
  },
  data () {
    return {
      proId: '',
      researchApprovalInfo: {}, // 研究者审批流
      subjectApprovalInfo: {} // 受试者审批流
    }
  },
  created () {
    this.getProjectId()
  },
  mounted () {
    this.initApproval()
  },
  methods: {
    // 获取项目id
    getProjectId () {
      const pro = storage.get(CURRENT_PROJECT)
      if (pro != null && pro.length > 0) {
        const project = JSON.parse(pro)
        this.proId = project.id
      }
    },
    // 获取审批流详情
    async initApproval () {
      const proId = this.proId
      if (!this.$auth('PROJECT.PROJECT_REVIEW')) return
      this.researchApprovalInfo = await getApprovalDetail({
        proId,
        type: 1
      })
      this.subjectApprovalInfo = await getApprovalDetail({
        proId,
        type: 2
      })
    }
  }
}
</script>
